<template>
  <div class="form">
    <h2 class="title"></h2>
    <a-divider :style="{ color: '#000' }" />
    <a-form :model="form" :style="{ width: '680px' }">
      <a-form-item
        field="dishName"
        label="菜品名称："
        style="margin-bottom: 40px"
      >
        <a-input
          v-model="form.dishName"
          placeholder="请输入菜名"
          style="width: 400px; background-color: #fff; border-radius: 10px"
          :rules="[{ required: true, message: '请输入菜品名称' }]"
        />
      </a-form-item>
      <a-form-item field="dishDescription" label="菜品描述:" style="margin-bottom: 40px">
        <a-input
          v-model="form.dishDescription"
          placeholder="请输入菜品描述"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <a-form-item field="dishPhoto" label="菜品照片:" style="margin-bottom: 40px">
        <a-input
          v-model="form.dishPhoto"
          placeholder="请输入菜品照片链接"
          style="width: 400px; background-color: #fff; border-radius: 10px"
          :rules="[{ pattern: /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/, message: '请输入有效的链接' }]"
        />
      </a-form-item>
      <a-form-item field="dishTips" label="菜品小帖士:" style="margin-bottom: 40px">
        <a-input
          v-model="form.dishTips"
          placeholder="请输入菜品小帖士"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <div class="btn" style="width: 600px">
        <a-button type="primary" class="confirm" @click="confirmFun"
          >创建</a-button
        >
        <a-button type="dashed" class="cancel" @click="cancelFun"
          >重置</a-button
        >
      </div>
    </a-form>
    <a-divider :style="{ color: '#000' }" />
  </div>
</template>
<script>
import {addDish} from "../../api/dish";
export default {
  props: {
    teacherlist: { type: Array },
  },
  data() {
    return {
      form: {
        dishName: "",
        dishDescription: "",
        dishPhoto: "",
        dishTips: "",
      }
    };
  },
  methods: {
    confirmFun() {
      addDish({
        dishName: this.form.dishName,
        dishDescribe: this.form.dishDescription,
        dishPicture: this.form.dishPhoto,
        dishTip: this.form.dishTips,
      }).then(res => {
        console.log(res);
        if(res.data.code == 200) {
          this.$message.success("添加成功！");
          this.$router.push("/dishes/dishesList");
        } else {
          this.$message.error("服务器异常");
        }
      })
    },
    cancelFun() {
      this.form = {
        dishName: "",
        dishDescription: "",
        dishPhoto: "",
        dishTips: "",
      };
    }
  }
};
</script>

<style scoped lang="less">
.form {
  background-color: white;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 600px;
  height: 400px;
}
.title {
  margin-left: 50px;
}
.btn {
  margin-left: 250px;
 .cancel {
    margin-left: 20px;
  }
}
a-form-item {
  margin-bottom: 20px;
}
</style>